<template>
  <div class="classification">
    <CommonHeader title="分类"> </CommonHeader>
    <!-- 分类内容 左右布局 点击左侧显示对应右侧 -->
    <div class="classification-content">
      <!-- 左侧分类 -->
      <div class="classification-left-nav">
        <div
          class="classification-left-item"
          v-for="(item, index) in tabs"
          :key="item.id"
          :class="{ active: index === activeTab }"
          @click="activeTab = index"
        >
          {{ item.catename }}
        </div>
      </div>
      <!-- 右侧分类 -->
      <div class="classification-right">
        <div class="classification-right-top">
          <div class="line"></div>
          <div class="text">{{ tabs[activeTab]?.catename }}</div>
          <div class="line"></div>
        </div>
        <!-- 底部图片列表 -->
        <div class="classification-right-bottom">
          <div v-if="hasChildren" class="classification-right-bottom-list">
            <!-- 跳转 商品列表 -->
            <div
              class="classification-right-bottom-item"
              v-for="child in currentChildren"
              :key="child.id"
              @click="handleClick(child)"
            >
              <div class="img">
                <CustomImage
                  :src="'http://43.138.15.137:4000/' + child.img"
                  alt=""
                />
              </div>
              <div class="text">{{ child.catename }}</div>
            </div>
          </div>
          <div v-else class="no-data">暂无分类</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonHeader from '@/components/common/publicHeader/index.vue';
import { getClassificationAPI } from '@/api/classification';
import CustomImage from '@/components/common/Image/index.vue';

export default {
  components: {
    CommonHeader,
    CustomImage,
  },
  data() {
    return {
      // 左侧分类
      tabs: [],
      activeTab: 0,
    };
  },
  mounted() {
    this.getClassification();
  },
  methods: {
    async getClassification() {
      const res = await getClassificationAPI();
      const { list } = res;
      this.tabs = list;
    },
    // 点击分类
    handleClick(child) {
      this.$router.push({
        path: '/productList',
        query: {
          id: child.id,
          type: 2,
        },
      });
    },
  },
  computed: {
    currentChildren() {
      return this.tabs[this.activeTab]?.children || [];
    },
    hasChildren() {
      return this.currentChildren.length > 0;
    },
  },
};
</script>

<style lang="scss" scoped>
.classification-content {
  display: flex;
  font-size: 14px;
  position: relative;

  .classification-left-nav {
    flex: 1;
    overflow-y: auto;
    background-color: #f7f8fa;

    // 设置再长也不显示滚动条
    ::-webkit-scrollbar {
      display: none;
    }

    .classification-left-item {
      position: relative;
      overflow: hidden;
      color: #323233;
      font-size: 14px;
      line-height: 20px;
      cursor: pointer;
      user-select: none;
      padding: 14px 12px;
      transition: all 0.3s ease;

      &.active {
        background-color: #fff;
        color: #ff6140;
        font-weight: 500;
        font-size: 15px;

        &::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          width: 4px;
          height: 20px;
          transform: translateY(-50%);
          background-color: #ff6140;
        }
      }
    }
  }

  .classification-right {
    flex: 2;
    overflow-y: auto;
    background-color: #fff;

    .classification-right-top {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      color: #323233;
      padding: 14px 6px;
      white-space: nowrap;
      color: #ff6140;

      gap: 10px;

      .line {
        width: 90px;
        height: 2px;
        background-color: #ff6140;
      }
    }

    .classification-right-bottom {
      .classification-right-bottom-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 14px 0;
      }

      .no-data {
        width: 100%;
        text-align: center;
        color: #999;
        font-size: 14px;
        padding: 20px 0;
      }

      // 一行显示3个
      .classification-right-bottom-item {
        flex: 0 0 33.3%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 500;
        color: #323233;
        padding: 14px 6px;
        white-space: nowrap;
        color: #ff6140;
        position: relative;

        &::after {
          position: absolute;
          box-sizing: border-box;
          content: ' ';
          pointer-events: none;
          top: -50%;
          right: -50%;
          bottom: -50%;
          left: -50%;
          border: 0 solid #ebedf0;
          transform: scale(0.5);
          z-index: 1;
          border-width: 1px 1px 1px 0;
        }

        img {
          width: 50px;
          height: 50px;
        }
      }
    }
  }
}
</style>
